<!doctype html>
<template id="tmpl">
  <style>
  ul {
    margin: 0;
    list-style: none;
    padding-left: 20px;
  }

  ::slotted([slot="title"]) {
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
  }

  ::slotted([slot="title"])::before {
    content: '📂';
    font-size: 14px;
  }

  .closed ::slotted([slot="title"])::before {
    content: '📁';
  }

  .closed ul {
    display: none;
  }
  </style>

  <div class="menu">
    <slot name="title"></slot>
    <ul><slot name="item"></slot></ul>
  </div>
</template>

<script>
customElements.define('custom-menu', class extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.append( tmpl.content.cloneNode(true) );

    this.shadowRoot.querySelector('slot[name="title"]').onclick = () => {
      this.shadowRoot.querySelector('.menu').classList.toggle('closed');
    };
  }
});
</script>

<custom-menu>
  <span slot="title">Candy menu</span>
  <li slot="item">Lollipop</li>
  <li slot="item">Fruit Toast</li>
  <li slot="item">Cup Cake</li>
</custom-menu>
